<template>
  <div class="listorder">
    
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.order_number" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="getOrderListAll">搜索</el-button>
      </el-form-item>
       <el-form-item>
        <el-select v-model="formInline.order" @change="page.pageNo=1;getOrderListAll()" placeholder="请选择订单状态" size="large">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="#"  />
      <el-table-column prop="orderNumber" label="订单编号"  />
      <el-table-column prop="orderPrice" label="订单价格" />
      <el-table-column prop="Send" label="是否发货" />
      <el-table-column prop="Cancel" label="是否取消" />
      <el-table-column prop="createdAt" label="下单时间" />
      <el-table-column label="操作">
        <template #default="scope"> 
          <el-dropdown>
            <span class="el-dropdown-link">
              选择操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="list(scope.row)"> 订单详情</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background 
        v-model="page.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="num"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" >
      </el-pagination>
    </div>

    <!-- 订单详情 -->
    <el-dialog v-model="orderflay" width="65%" title="订单详情">
      
      <el-descriptions>
        <el-descriptions-item label="订单号">{{orderObj.orderNumber}}</el-descriptions-item>
        <el-descriptions-item label="运单号">{{orderObj.expressNo}}</el-descriptions-item>
        <el-descriptions-item label="快递公司">{{orderObj.expressCompany}}</el-descriptions-item>
        <el-descriptions-item label="收货人">{{orderObj.consigneeName}}</el-descriptions-item>
        <el-descriptions-item label="收货人电话">{{orderObj.consigneePhone}}</el-descriptions-item>
        <el-descriptions-item label="收货人地址">{{orderObj.consigneeAddr}}</el-descriptions-item>
      </el-descriptions>
      <el-table :data="orderObj.goodsList" border style="width: 100%">
      <el-table-column type="index" label="#"  />
      <el-table-column prop="goodsLogo" label="缩略图">
        <template #default="scope">
          <img :src="'https://lqshuige.top:9000/images/upload/prd/'+scope.row.goodsLogo" width="100" height="100" />
        </template>
      </el-table-column>
      <el-table-column prop="goodsName" label="商品名" />
      <el-table-column prop="goodsPrice" label="价格" />
      <el-table-column prop="goodsNumber" label="数量" />
      <el-table-column prop="goodsTotalPrice" label="总计" />
    </el-table>

    </el-dialog>
  </div>
</template>

<script lang="ts" setup>

// import { getOrderList } from '@/network/order'
import httpRequest from '../service';

import { onMounted, ref,reactive } from 'vue'
import type { ElForm } from 'element-plus'

import { Search,ArrowDown } from '@element-plus/icons-vue'

// import { SubmitForm } from '@/util'

const options = [
  {
    value: 0,
    label: '请选择订单状态',
  },
  {
    value: 1,
    label: '待发货',
  },
  {
    value: 2,
    label: '已发货',
  },
  {
    value: 3,
    label: '申请取消或已取消',
  }
]


// 查询对象
const formInline = reactive({
  order_number: "",
  order:0
})
// 页码
const page = reactive({
  pageNo: 1,
  pageSize: 5,
})
const getOrderListAll = ()=>{
  let obj:any = {
    order_number:'',
    isCancel: null,
    isSend: null
  }
  switch(formInline.order){
    case 0:
      break
    case 1:
      obj.isSend = 2
      break
    case 2:
      obj.isSend = 1
      break
    case 3:
      obj.isCancel = 1
      break
  }
 
   httpRequest.request({ url: "/order/listorder", method: 'post' ,data:{...obj,...page}})
  .then((res:any)=>{
    
    let {data:{count,rows}} = res
    rows.forEach((elemen:any) => {
      switch(elemen.isSend){
        case 1:
          elemen.Send="已发货"
          break
        case 2:
          elemen.Send="未发货"
          break
        case 3:
          elemen.Send="已收货"
          break
      }
      switch(elemen.isCancel){
        case 1:
          elemen.Cancel="已取消"
          break
        case 2:
          elemen.Cancel="未取消"
          break
        case 3:
          elemen.Cancel="申请取消"
          break
      }
    });
    tableData.value = rows
    num.value = count
  })
 

}
// 搜索
const onSubmit = () => {
  page.pageNo = 1
  getOrderListAll()
}

let tableData = ref([])
let num = ref<Number>(0)
onMounted(()=>{
  getOrderListAll()
})

// 分页
const handleSizeChange = (pageSize:number | string)=>{
  page.pageNo = 1
  page.pageSize = Number(pageSize)
  getOrderListAll()
}
const handleCurrentChange = ()=>{
  getOrderListAll()
}



// 订单详情
const list = (rows:any)=>{
  orderflay.value = true
  orderObj.value = rows
}
const orderflay = ref(false)
const orderObj = ref<any>()
</script>

<style lang="less" scoped>
  .listorder{
    padding: 20px;
  }
  .page{
    margin-top: 30px;
  }
</style>